<script>
import { mapActions, mapState } from 'vuex'
export default {
  methods: {
    ...mapActions('product', ['loadData']),
    ...mapActions('cart', ['addToCart'])
  },

  computed: {
    ...mapState({
      products: state => state.product.all
    })
  },

  mounted() {
    this.loadData()
  }
}
</script>

<template>
  <div>
    <h1>产品列表</h1>
    <hr>
    <ul>
      <li v-for="product in products">
        {{product.name}} - ￥{{product.price}} 
        <button 
          @click="addToCart(product.id)"
          :disabled="product.inventory <= 0"
        >放入购物车</button>
      </li>
    </ul>
  </div>
</template>

<style lang="scss">
  
</style>
